<script setup>

import { watch } from 'vue';

  watch('$route',(to,from)=>{

      console.log('路由跳转到了',to.path,'页面')
       if(to.path === '/Personal_homepage'){
        const target = document.querySelector('.ui')
        target.classList.add('.width_max')
       }
    })
   
  
</script>

<template>
  <div class="ui">
    <div class="Sidebar">
      <div style="background-color: rgb(142, 171, 229);width: 100%;">
        <!-- 这是两个圆角的颜色 -->
        <div class="Leave_blank_head"></div>
        <div style="background-color:rgb(172, 154, 206);">

          <div class="Sidebar_head">
            <div class="image_head">
              <img src="./img/head_test.png" alt="">
            </div>
            <p>这里应该有一个名字</p>
          </div>
        </div>
        <div class="Leave_blank_body"></div>

      </div>
      <router-link to="/" class="link_button">
        <div class="Sidebar_inner">
          <img src="./img/head_test.png" alt="">
          <h2>首页</h2>
        </div>
      </router-link>
      <router-link to="/Personal_homepage" class="link_button">
        <div class="Sidebar_inner">
          <img src="./img/head_test.png" alt="">
          <h2>个人主页</h2>
        </div>
      </router-link>
      <router-link to="/List" class="link_button">
        <div class="Sidebar_inner">
          <img src="./img/head_test.png" alt="">
          <h2>神人榜</h2>
        </div>
      </router-link>
    </div>
  </div>
  <router-view></router-view>
</template>

<style scoped>
h2 {
  margin: 0px;
}

.Leave_blank_head {
  height: 60px;
  width: 100%;
  background-color: rgb(172, 154, 206);
  border-radius: 0 0 35px 0;
}

.Sidebar_head {
  display: flex;
  border-radius: 50px 0 0 50px;
  background-color: rgb(142, 171, 229);
  height: 90px;
  width: 250px;

}
.width_max{
  width: 250px;
}

.Leave_blank_body {
  height: 60px;
  width: 100%;
  background-color: rgb(172, 154, 206);
  border-radius: 0 35px 0 0;
}

.Sidebar {
  /* position: absolute;
  top: 0px;
  left: 0px; */
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 100vh;
  /* width: 200px; */
  overflow: hidden;
  background-color: rgb(172, 154, 206);
  transition: width 0.5s;
}

.ui {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 90px;
  transition: width 0.5s;
  overflow: hidden; 
}
.Sidebar_inner > h2{
  display: none;
  opacity: 0;
  transition: opacity 1s;
}
.Sidebar_head > p{
  display: none;
  opacity: 0;
  transition: opacity 1s ease 4s;
}
.ui:hover {
  width: 250px;
}
.ui:hover  .Sidebar_inner > h2 {
  display: block;
  opacity: 1;
}
.ui:hover  .Sidebar_head > p {
  display: block;
  opacity: 1;
}

.link_button {
  display: flex;
  justify-content: left;
  align-content: flex-start;
  flex-direction: row;
  text-decoration: none;
  color: black;
  flex-wrap: wrap;
  padding-left: 10px;
}

.Sidebar_inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
  align-content: flex-start;
  height: 100px;
  width: 240px;
}

.Sidebar_inner>img {
  height: 50px;
  margin: 10px;
}

.Sidebar_inner>h2 {
  margin-top: 15px;
}

.image_head {
  border-radius: 25px 25px 25px 25px;
  height: 60px;
  width: 60px;
  overflow: hidden;
  margin: 15px;
}

.image_head>img {
  height: 60px;
}
</style>
